<template>
  <div class="home">
    <van-search
      v-model="searchVal"
      shape="round"
      :placeholder="defaultKeyword"
      disabled
      @click="searchPopup"
    />
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in banner" :key="item.id">
        <img :src="item.image_url" width="100%" height="100%" />
      </van-swipe-item>
    </van-swipe>

    <transition name="van-fade">
      <div class="popup_shadow" v-show="popupIsShow"></div>
    </transition>

    <transition name="slide">
      <router-view />
    </transition>
  </div>
</template>

<script>
// @ is an alias to /src

import { indexApi, GetHistoryListApi } from "../request/api";
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      searchVal: "",
      //轮播图数据
      banner: [],
      //搜索框数据
      defaultKeyword: "",
    };
  },
  computed: {
    ...mapState({
      popupIsShow: (state) => state.popupShow.popupIsShow,
    }),
  },
  name: "Home",
  components: {},
  created() {
    indexApi().then((res) => {
      // console.log(res.data);
      let { banner } = res.data.data;
      this.banner = banner;
    }),
      GetHistoryListApi().then((res) => {
        console.log(res);
        let { defaultKeyword } = res.data.data;
        this.defaultKeyword = defaultKeyword.keyword;
      });
  },
  methods: {
    ...mapMutations({
      chanPopupIsShow: "popupShow/chanPopupIsShow",
    }),
    //点击搜索框跳转
    searchPopup() {
      this.$router.push("/home/popup");
      this.chanPopupIsShow(true);
    },
  },
  watch:{
    $route(to,from){
      if(to.path=="/home"){
        console.log(to);
           this.chanPopupIsShow(false);
      }
    }
  }
};
</script>
<style lang="less">
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  height: calc(400 * 100vw / 750);
  // height: 100%;
  text-align: center;
  background-color: #39a9ed;
}
.slide-enter,
.slide-leave-to {
  right: -100%;
}
.slide-enter-active,
.slide-leave-active {
  transition: all 500ms linear;
}
.slide-enter-to,
.slide-leave {
  right: 0%;
}
.popup_shadow {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  position: absolute;
  top: 0;
  left: 0;
}
</style>
